<template>
<div>
  <div class="pa-8 pb-0 pt-6" v-for="courses in courseList" :key="courses.id">
    <div class="d-flex mb-2 align-center">
      <v-icon class="mr-2" color="green">mdi-book-education</v-icon>
      <h3 class="d-inline">{{courses.type}}</h3>
        <v-btn
            v-if="showAddBt"
            @click="showDialogs"
            icon
            class="ml-2 d-inline"
        >
          <v-icon>mdi-plus-box-multiple-outline</v-icon>
        </v-btn>
    </div>
    <v-divider></v-divider>
    <div class="out_contain pt-4">
      <div class="card_contain"  v-for="(course) in courses.list" :key="course.id">
        <div class="container_img" v-on:mouseenter="mouseEnter(course.id)"
             @mouseleave="mouseLeave">
          <div class="div_icon" v-if="showIconId === course.id">
            <v-btn
                icon
                v-if="showVideoBt"
                @click="toVideo(course)"
            >
              <v-icon
                  color="#FF0000"
                  size="40"
              >
                mdi-youtube
              </v-icon>
            </v-btn>

            <v-btn
                icon
                v-if="showEditBt"
                @click="editCourse(course,courses.type)"
            >
              <v-icon
                  color="#0D47A1"
                  size="40"
              >
                mdi-file-document-edit
              </v-icon>
            </v-btn>

            <v-btn
                @click="deleteCourse(course.courseId)"
                icon
                v-show="showDeleteBt"
            >
              <v-icon
                  color="#FF5722"
                  size="40"
              >
                mdi-delete-forever
              </v-icon>
            </v-btn>
          </div>
          <img class="card_img" :class="[showIconId === course.id ? 'changeImg' : '']" :src="course.cover" alt="课程封面">
        </div>
        <div class="card_content">
          <div>
            <h3 class="course_title">{{course.title}}</h3>
            <div class="flex mb-1 mt-2">
              <v-icon small>mdi-account-supervisor</v-icon>
              <p class="course_name d-inline">班级组：{{course.classId}}</p>
            </div>
            <div class="flex">
              <v-avatar
                  class="mr-4"
                  size="25"
              >
                <img
                    :src="course.avatar"
                    alt="老师头像"
                >
              </v-avatar>
              <p  class="course_teacher d-inline">{{course.teacher}}</p>
            </div>
          </div>
          <div class="card_bottom">
            <div class="flex">
              <v-icon color="#FA7E46" class="mr-2" small> mdi-book-open-blank-variant</v-icon>
              <p class="time ma-0 d-inline">{{course.startTime}} 开课</p>
            </div>
            <div class="peopleNum ma-0">{{course.studySum}}人学习</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {deleteCourse} from "../../network/Details/course/onlineCourse";

export default {
  name: "Course",
  props:{
    showAddBt:{
      type:Boolean,
      require:true,
      default:false
    },
    showDeleteBt:{
      type:Boolean,
      require:true,
      default:false
    },
    showEditBt:{
      type:Boolean,
      require:true,
      default:false
    },
    showVideoBt:{
      type:Boolean,
      require:true,
      default:false
    },
    courseList:{
      type:Array,
      require: true
    }
  },
  data(){
    return{
      btShow:false,
      showIconId:-1
    }
  },
  methods:{
    showDialogs(){
      this.$emit("clickAddBt");
    },
    mouseEnter(id){
      this.showIconId = id;
    },
    mouseLeave(){
      this.showIconId = -1;
    },
    deleteCourse(courseId) {
      this.$confirm('此操作将永久删除该课程及其相关资料, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCourse({courseId}).then(res => {
          if(res.code === 200){
            this.$parent.refresh();
            this.$message.success(res.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑课程
    editCourse(course,type){
      course.type = type;
      delete course.teacher;
      delete course.studySum;
      delete course.id;
      delete course.avatar;
      this.$router.push({
        path:'/edit',
        query:{
          course
        }
      })
    },
    toVideo(course){
      delete course.avatar;
      delete course.classId;
      delete course.cover;
      delete course.teacher;
      delete course.id;
      this.$router.push({
        path:'/video',
        query:{
          course
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.changeImg{
  opacity:0.5;
  -webkit-filter: blur(1.8px);
  filter: blur(1.8px);
}
.out_contain{
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 224px);
  grid-gap: 15px;
}
.card_contain{
  width: 224px;
  height: 252px;
  margin: 0 0 30px 0;
  background: #fff;
  border-radius:8px;
  transition: box-shadow 0.5s;
  -webkit-transition: box-shadow 0.5s;
  .container_img{
    position: relative;
    width: 224px;
    height: 126px;
    .div_icon{
      position: absolute;
      z-index: 10;
      width: 100%;
      left: 0;
      top: 30%;
      display: flex;
      justify-content: space-evenly;
    }
    .card_img{
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px 8px 0 0;
    }
  }
  .card_content{
    padding: 8px;
    width: 100%;
    .course_title{
      font-size: 15px;
    }
    .course_teacher{
      font-size: 13px;
      height: 13px;
      line-height: 13px;
      color: #888;
    }
    .course_name{
      font-size: 14px;
      height: 14px;
      line-height: 14px;
      color: #666;
      margin-left: 3px;
    }
    .card_bottom{
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      bottom: 4px;
      width: 100%;
      margin-top: 7px;
      .time{
        color: #FA7E46;
        margin: 0;
      }
      .peopleNum{
        right: 15px;
        color: #9999B3;
      }
    }
  }
}
p,h3{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.card_contain:hover{
  box-shadow:5px 5px 10px gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
</style>

